<input type="hidden" name="idSurvey" id="idSurvey" value="<?php echo $currentSurvey[0]['survey_id']; ?>" />
<input type="hidden" name="idTheme" id="idTheme" value="<?php echo $currentSurvey[0]['theme_id']; ?>" />
<input type="hidden" name="idUser" id="idUser" value="<?php echo $currentSurvey[0]['user_id']; ?>" />
<div class="container" id = "createques">
	<?php echo $this->load->view($template); ?>
	<div class="msgLoadAjax"><img src="http://localhost/Theme_Setting/public_skin/images/ajax-loader.gif" /></div>
	<div class="msgSuccess">Success</div>
</div>
<?php echo form_open_multipart('member/createsurvey/uploadImageTheme');?>
	<label>Upload Image:</label>
	<input type="file" name="fileImagesCustomTheme" id="fileImagesCustomTheme" size="20" />
	<input type="button" name="btUploadCustomTheme" id="btUploadCustomTheme" value="Upload" />
</form>
<script type="text/javascript">
		$(document).ready(function() {
			clickMenu();

			uploadImageCustomTheme();

			picTheme();

			picColor();

			saveOptions();

			saveColor();
		});

		function clickMenu() {
			$('#top ul li').bind('click', function() {
				$('#top ul li').each(function() {
					if($(this).hasClass('activeMenu')) {
						$(this).removeClass('activeMenu');
						$(this).find('.box-dropdown-top-survey').hide();
					}
				});
				$(this).addClass('activeMenu');
				$('#top ul li.activeMenu').find('.box-dropdown-top-survey').show();
			});
		}

		function uploadImageCustomTheme() {
			$('#btUploadCustomTheme').bind('click', function() {
				var fileImg = $('#fileImagesCustomTheme').val();
				$.ajax({
					type: 'POST',
					url: '<?php echo base_url("member/createsurvey/uploadImageTheme"); ?>',
					data: {fileImg:fileImg},
					beforeSend: function() {
						$(".msgLoadAjax").show();
					},
					success: function(result) {
						$(".msgLoadAjax").hide();
						$('.msgSuccess').fadeIn('fast').delay(3000).fadeOut('fast');
					}
				})
			});
		}

		function picTheme() {
			$('#allThemeSurvey li').bind('click', function() {
				$('#allThemeSurvey li').each(function() {
					if($(this).hasClass('active_theme')) {
						$(this).removeClass('active_theme');
					}
				});
				$(this).addClass('active_theme');
				var theme_id = $('.list-custom-top-menu li.active_theme .box-img-theme img').attr('id_theme');
				$('#idTheme').val(theme_id);
				var idSurvey = $('#idSurvey').val();
				var idTheme = $('#idTheme').val();
				var idUser = $('#idUser').val();

				$.ajax({
					type: 'POST',
					url: '<?php echo base_url("member/createsurvey/insertTheme"); ?>',
					data: {idSurvey:idSurvey,idTheme:idTheme,idUser:idUser},
					beforeSend: function() {
						$(".msgLoadAjax").show();
					},
					success: function(result) {
						$(".msgLoadAjax").hide();
						$('.msgSuccess').fadeIn('fast').delay(3000).fadeOut('fast');
						window.location = window.location.href;
					}
				})


			});
		}

		function saveOptions() {
			$('#btOptions').bind('click', function() {
				var idSurvey = $('#idSurvey').val();
				var idTheme = $('#idTheme').val();
				var idUser = $('#idUser').val();
				var fontBase = $('#slFontBase option:selected').val();
				var styleFont = $('#slStyleFont option:selected').val();
				var widthBase = $('#txtWidth').val();
				var px = $('#slPx option:selected').val();
				if($('input[name="cbWidth"]:checked').val() == 'on') {
					var checkboxWidth = 'T';
				}else {var checkboxWidth = 'F';}
				var rdSurveyTitle = $('input[name="rdSurveyTitle"]:checked').val();
				var rdPageTitle = $('input[name="rdPageTitle"]:checked').val();
				var rdPageDes = $('input[name="rdPageDes"]:checked').val();
				var rdQuestionNumbers = $('input[name="rdQuestionNumbers"]:checked').val();
				var rdBackButton = $('input[name="rdBackButton"]:checked').val();
				var rdProgressBar = $('input[name="rdProgressBar"]:checked').val();
				var rdPower = $('input[name="rdPower"]:checked').val();
				$.ajax({
					type: 'POST',
					url: '<?php echo base_url("member/createsurvey/updateOptions"); ?>',
					data: {idSurvey:idSurvey,idTheme:idTheme,idUser:idUser,fontBase:fontBase,styleFont:styleFont,widthBase:widthBase,px:px,checkboxWidth:checkboxWidth,rdSurveyTitle:rdSurveyTitle,rdPageTitle:rdPageTitle,rdPageDes:rdPageDes,rdQuestionNumbers:rdQuestionNumbers,rdBackButton:rdBackButton,rdProgressBar:rdProgressBar,rdPower:rdPower},
					beforeSend : function(){
						$(".msgLoadAjax").show();
					},
					success: function(result) {
						$(".msgLoadAjax").hide();
						$('.msgSuccess').fadeIn('fast').delay(3000).fadeOut('fast');
						// var jsonCustomTheme = JSON.parse(result);
						// customOptions(jsonCustomTheme);
					}
				});
			});
		}

		function saveColor() {
			$('#btColors').bind('click', function() {
				var idSurvey = $('#idSurvey').val();
				var idTheme = $('#idTheme').val();
				var idUser = $('#idUser').val();
				var clTxtBody = $('#colorBody').val();
				var clTxtPage = $('#colorPage').val();
				var clTxtPageTitle = $('#colorPageTitle').val();
				var clTxtPageText = $('#colorPageText').val();
				var clTxtHeader = $('#colorHeader').val();
				var clTxtHeaderText = $('#colorHeaderText').val();
				var clTxtQuestion = $('#colorQuestion').val();
				var clTxtQuestionTitle = $('#colorQuestionTitle').val();
				var clTxtProBar = $('#colorProBar').val();

				$.ajax({
					type: 'POST',
					url: '<?php echo base_url("member/createsurvey/updateColors"); ?>',
					data: {idSurvey:idSurvey,idTheme:idTheme,idUser:idUser,clTxtBody:clTxtBody,clTxtPage:clTxtPage,clTxtPageTitle:clTxtPageTitle,clTxtPageText:clTxtPageText,clTxtHeader:clTxtHeader,clTxtHeaderText:clTxtHeaderText,clTxtQuestion:clTxtQuestion,clTxtQuestionTitle:clTxtQuestionTitle,clTxtProBar:clTxtProBar},
					beforeSend: function() {
						$(".msgLoadAjax").show();
					},
					success: function(result) {

						$(".msgLoadAjax").hide();
						$('.msgSuccess').fadeIn('fast').delay(3000).fadeOut('fast');

						var jsonCustomColor = JSON.parse(result);
						customColor(jsonCustomColor);
					}
				});
			});
		}

		function customOptions(jsonCustomTheme) {
			var sct = jsonCustomTheme;
			$('#wrap').css({'font-family':sct[0].base_font}); // Font Survey
			$('#wrap').css({'font-weight':sct[0].font_style}); // Font Weight Survey
			if(sct[0].auto_width == 'T') {
				$('#wrap').css({'width':'auto'});
			}else {
				if(sct[0].width_option != null) {
					$('#wrap').css({'width':sct[0].width_option+sct[0].px});
				}
			} // Width Survey

			if(sct[0].survey_title == 'T') {
				$('#title strong').css({'display':'block'});
			}else {
				$('#title strong').css({'display':'none'});
			} // Title Survey

			if(sct[0].page_title == 'T') {
				$('#title label').css({'display':'block'});
			}else {
				$('#title label').css({'display':'none'});
			} // Page Title Survey

			if(sct[0].page_description == 'T') {
				$('.question-box .des-survey').css({'display':'block'});
			}else {
				$('.question-box .des-survey').css({'display':'none'});
			} // Page Description Survey

			if(sct[0].question_numbers == 'T') {
				$('.question-box .question-title span').css({'display':'block'});
			}else {
				$('.question-box .question-title span').css({'display':'none'});
			} // Question Numbers Survey

			if(sct[0].back_button == 'T') {
				$('.back-button-step-survey').css({'display':'block'});
			}else {
				$('.back-button-step-survey').css({'display':'none'});
			} // Back Button Survey

			if(sct[0].progress_bar == 'T') {
				$('.question-box .progress-bar-survey').css({'display':'block'});
			}else {
				$('.question-box .progress-bar-survey').css({'display':'none'});
			} // Progress Bar Survey

			if(sct[0].powered_by == 'T') {
				$('.footer-survey .copyright').css({'display':'block'});
			}else {
				$('.footer-survey .copyright').css({'display':'none'});
			} // Powered by Survey

		}

		function customColor(jsonCustomColor) {
			var jcc = jsonCustomColor;
			$('body').css({'background':jcc[0].bg_body});
			$('#wrap').css({'background':jcc[0].page_bg_color});
			$('.colorPageTitle').css({'background':jcc[0].page_title_color});
			$('.page-text-survey').css({'color':jcc[0].page_text_color});
			$('#title').css({'background':jcc[0].header_bg_color});
			$('#title strong').css({'color':jcc[0].header_text_color});
			$('#title label').css({'color':jcc[0].header_text_color});
			$('.colorQuestion').css({'background':jcc[0].question_bg_color});
			$('.question-box h3').css({'color':jcc[0].question_title_color});
			$('.progress-bar-survey').css({'background':jcc[0].progress_bar_color});
		}

		function picColor() {

		    $('.colorBody').on('change', function() {
		    	$('#colorBody').val('#'+this.value);
			});

			$('.colorPage').on('change', function() {
		    	$('#colorPage').val('#'+this.value);
			});

			$('.colorPageTitle').on('change', function() {
		    	$('#colorPageTitle').val('#'+this.value);
			});

			$('.colorPageText').on('change', function() {
		    	$('#colorPageText').val('#'+this.value);
			});

			$('.colorHeader').on('change', function() {
		    	$('#colorHeader').val('#'+this.value);
			});

			$('.colorHeaderText').on('change', function() {
		    	$('#colorHeaderText').val('#'+this.value);
			});

			$('.colorQuestion').on('change', function() {
		    	$('#colorQuestion').val('#'+this.value);
			});

			$('.colorQuestionTitle').on('change', function() {
		    	$('#colorQuestionTitle').val('#'+this.value);
			});

			$('.colorProBar').on('change', function() {
		    	$('#colorProBar').val('#'+this.value);
			});
		}

	</script>
	<div class="msgSuccess">Success</div>